<template>
    <div>
        <!-- 顶部面包屑导航 -->
        <breadcrumb-nav>
            <template v-slot:firstMenu>用户管理</template>
            <template v-slot:secondMenu>用户列表</template>
        </breadcrumb-nav>

        <!-- 卡片视图-->
        <el-card class="box-card">
            <!-- 顶部搜索与添加按钮 -->
            <user-search-and-add :queryInfo="queryInfo" @user-list="updateUserList"/>

            <!-- 展示的表格 -->
            <user-table :user-list="userList" :query-info="queryInfo" @user-list="updateUserList"/>

            <!-- 分页 -->
            <Pagination :query-info="queryInfo" :total="total" @page-size-change="handleSizeChange"
                             @current-page-change="handleSizeChange"/>
        </el-card>
    </div>
</template>

<script>

// 导入公共组件
import BreadcrumbNav from "../common/BreadcrumbNav";

// 导入子组件
import UserSearchAndAdd from "./childComponents/UserSearchAndAdd";
import UserTable from "./childComponents/UserTable";
import Pagination from "@/components/common/Pagination";

// 导入发送网络请求的函数
import {getUserListRequest} from "@/network/user"

export default {
    name: "Users",
    components: {
        BreadcrumbNav,
        UserSearchAndAdd,
        UserTable,
        Pagination
    },
    data() {
        return {
            queryInfo: {
                pageNum: 1, // 当前页
                pageSize: 10 // 每页显示多少条数据
            },
            userList: [],
            total: 100
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        // 获取用户列表
        async getUserList() {
            const {pageNum, pageSize} = this.queryInfo
            try {
                const {code, data: result, msg} = await getUserListRequest(pageNum, pageSize)
                if (code !== 200) return this.$errorMessage(msg)
                this.userList = result["list"]
                this.total = result["total"]
            } catch (e) {
                this.$errorMessage(e)
            }
        },

        // 监听子组件发射的事件，获得最新的userList和total信息
        updateUserList() {
            this.getUserList();
        },

        // 监听pageSize改变的事件，并发送新的网络请求
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize;
            this.getUserList();
        },

        // 监听页码改变的事件，并发送新的网络请求
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage;
            this.getUserList();
        }
    }
}
</script>

<style scoped>
.el-table {
    margin-top: 15px;
}
</style>
